<template>
<div style="width: 100%;height: 40px;background-color: rgb(246, 166, 74);">
    <div class="show">
      <button  @click="router.push('/')">首页</button>
      <button  @click="$router.push('sort?category=桌花')" :v-model="category">桌花</button>
      <button  @click="$router.push('sort?category=花束')" :v-model="category">花束</button>
      <button  @click="$router.push('sort?category=礼盒')" :v-model="category">礼盒</button>
      <button  @click="$router.push('sort?category=蛋糕')" :v-model="category">蛋糕</button>
      <button  @click="$router.push('sort?category=花篮')" :v-model="category">花篮</button>
      <button  @click="$router.push('sort?category=绿植')" :v-model="category">绿植</button>
      <button  @click="$router.push('sort?category=周花')" :v-model="category">周花</button>
    </div>
</div>
  
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'; 
import { ref } from 'vue'
const category = ref('')
const router = useRouter()
</script>
<style scoped>

.show{
  width: 500px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  margin-left: 450px;
}


.show>button{
  background-color: transparent;
  font-weight: bolder;
  line-height: 40px;
  
  
  border: none;
  cursor: pointer;
  font-size: 17px;
  
  
}
button:hover{
    color:blue;
  }


</style>